8e:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1ylgxnc55m13a.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1lok2_u6v-esh.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1ylgxnc55m13a.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1lok2_u6v-esh.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_Aof1NEiPsdMryfM2HXUorAQkae2V"],"SWRDataProvider"] 90:T4b09,[V0_FILE]typescriptreact:file="contact-picker.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Search, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Input } from "@/components/ui/input" interface Contact { id: string name: string avatar: string phone: string email: string address: string } const contacts: Contact[] = [ { id: "1", name: "Alice Johnson", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 123-4567", email: "alice@example.com", address: "123 Main St, Anytown, USA", }, { id: "2", name: "Bob Smith", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 234-5678", email: "bob@example.com", address: "456 Elm St, Somewhere, USA", }, { id: "3", name: "Charlie Brown", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 345-6789", email: "charlie@example.com", address: "789 Oak St, Nowhere, USA", }, { id: "4", name: "Diana Prince", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 456-7890", email: "diana@example.com", address: "101 Pine St, Everywhere, USA", }, { id: "5", name: "Ethan Hunt", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 567-8901", email: "ethan@example.com", address: "202 Maple St, Anywhere, USA", }, { id: "6", name: "Fiona Apple", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 678-9012", email: "fiona@example.com", address: "303 Cedar St, Someplace, USA", }, { id: "7", name: "George Michael", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 789-0123", email: "george@example.com", address: "404 Birch St, Elsewhere, USA", }, { id: "8", name: "Hannah Montana", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 890-1234", email: "hannah@example.com", address: "505 Walnut St, Overthere, USA", }, ] export default function ContactPicker() { const [searchTerm, setSearchTerm] = useState("") const [selectedContact, setSelectedContact] = useState(null) const filteredContacts = contacts.filter((contact) => contact.name.toLowerCase().includes(searchTerm.toLowerCase())) const selectContact = (contact: Contact) => { setSelectedContact(contact) } const closeDetails = () => { setSelectedContact(null) } return (

setSearchTerm(e.target.value)} />

{selectedContact ? (

{selectedContact.name}

Phone: {selectedContact.phone}
Email: {selectedContact.email}
Address: {selectedContact.address}

) : ( filteredContacts.map((contact) => ( selectContact(contact)} >

{contact.name}

{contact.phone}

)) )}

) } [V0_FILE]typescriptreact:file="ai-persona-picker.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Search, X, MessageCircle, Zap, ChevronRight, Send } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Input } from "@/components/ui/input" interface Message { id: string content: string sender: "user" | "ai" timestamp: string } interface Conversation { id: string title: string summary: string messages: Message[] } interface AIPersona { id: string name: string avatar: string summary: string contextLength: number price: number totalConversations: number tokensConsumed: number conversations: Conversation[] } const aiPersonas: AIPersona[] = [ { id: "1", name: "Alice AI", avatar: "/placeholder.svg?height=100&width=100", summary: "Friendly AI assistant specializing in creative writing", contextLength: 2048, price: 0.02, totalConversations: 1500, tokensConsumed: 750000, conversations: [ { id: "conv1", title: "Brainstorming for Short Story", summary: "Discussed potential genres and plot ideas for a short story.", messages: [ { id: "m1", content: "Hello! How can I help with your writing today?", sender: "ai", timestamp: "2023-05-10 14:30", }, { id: "m2", content: "I need help brainstorming ideas for a short story.", sender: "user", timestamp: "2023-05-10 14:31", }, { id: "m3", content: "Great! Let's start by considering a few genres. Are you interested in science fiction, fantasy, mystery, or something else?", sender: "ai", timestamp: "2023-05-10 14:32", }, ], }, { id: "conv2", title: "Character Development Workshop", summary: "Worked on developing complex characters for a novel.", messages: [ { id: "m1", content: "I'm struggling with character development for my novel. Can you help?", sender: "user", timestamp: "2023-05-11 10:00", }, { id: "m2", content: "Character development is crucial for a compelling novel. Let's start by discussing your main character. What's their name and basic background?", sender: "ai", timestamp: "2023-05-11 10:01", }, ], }, ], }, { id: "2", name: "Bob Bot", avatar: "/placeholder.svg?height=100&width=100", summary: "Technical AI assistant for programming help", contextLength: 4096, price: 0.05, totalConversations: 2000, tokensConsumed: 1200000, conversations: [ { id: "conv1", title: "Python Debugging Session", summary: "Helped debug a Python script with a focus on error handling.", messages: [ { id: "m1", content: "Hello! What programming language are you working with today?", sender: "ai", timestamp: "2023-05-11 09:15", }, { id: "m2", content: "I'm having trouble with a Python script. Can you help?", sender: "user", timestamp: "2023-05-11 09:16", }, { id: "m3", content: "I'd be happy to help with your Python script. Can you describe the issue you're facing or share the relevant part of your code?", sender: "ai", timestamp: "2023-05-11 09:17", }, ], }, ], }, ] export default function AIPersonaPicker() { const [searchTerm, setSearchTerm] = useState("") const [selectedPersona, setSelectedPersona] = useState(null) const [selectedConversation, setSelectedConversation] = useState(null) const [newMessage, setNewMessage] = useState("") const filteredPersonas = aiPersonas.filter((persona) => persona.name.toLowerCase().includes(searchTerm.toLowerCase())) const selectPersona = (persona: AIPersona) => { setSelectedPersona(persona) setSelectedConversation(null) } const selectConversation = (conversation: Conversation) => { setSelectedConversation(conversation) } const closeDetails = () => { setSelectedPersona(null) setSelectedConversation(null) } const sendMessage = () => { if (newMessage.trim() && selectedConversation) { const updatedConversation = { ...selectedConversation, messages: [ ...selectedConversation.messages, { id: `m${selectedConversation.messages.length + 1}`, content: newMessage, sender: "user" as const, timestamp: new Date().toISOString(), }, ], } setSelectedConversation(updatedConversation) setNewMessage("") } } return (

setSearchTerm(e.target.value)} />

{selectedPersona ? (

{selectedPersona.name}

{selectedConversation ? (

{selectedConversation.messages.map((message) => (

{message.content}

{message.timestamp}

))}

setNewMessage(e.target.value)} onKeyPress={(e) => e.key === "Enter" && sendMessage()} />

) : (

{selectedPersona.name}

{selectedPersona.summary}

Context Length

{selectedPersona.contextLength}

Price per 1K tokens

${selectedPersona.price.toFixed(3)}

Total Conversations

{selectedPersona.totalConversations.toLocaleString()}

Tokens Consumed

{selectedPersona.tokensConsumed.toLocaleString()}

Past Conversations

{selectedPersona.conversations.map((conv) => (

selectConversation(conv)} >

{conv.title}

{conv.summary}

))}

)} ) : ( filteredPersonas.map((persona) => ( selectPersona(persona)} >

{persona.name}

{persona.summary}

{persona.totalConversations} {(persona.tokensConsumed / 1000).toFixed(1)}K

)) )}

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import React from "react" interface InputProps extends React.InputHTMLAttributes {} export const Input = React.forwardRef( ({ className, type, placeholder, ...props }, ref) => { return }, ) Input.displayName = "Input" 84:["$","$L8e",null,{"chatId":"IDNopNuKXlo","children":["$","$L8f",null,{"data":{"@\"active-block\",\"IDNopNuKXlo\",":{"id":"TIkxSJd6VqM","messageId":"y2E1RFxIZWYMYgA8dg71IBz5q5B7NMZ9","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ios-contact-picker","type":"code-project","project":"ios-contact-picker"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"IDNopNuKXlo\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from bradennapier

More Templates Like This